<template>
	<div class="edit-button-group">
		<div
			v-for="(item, index) in itemList" :key="index"
			class="item-wrap">
			<div v-show="item.itemStatus !== 'edit'" class="inner-item">
				<span class="text ellipsis">{{item[showField]}}</span>
				<span v-if="isEditGroup && item.itemStatus === 'normal'" @click="cickEdit($event, item, index)">
					<svg-icon iconClass="edit" class="icon"></svg-icon>
				</span>
				<span v-if="isEditGroup && item.itemStatus !== 'normal'" @click="cickDelete(item, index)">
					<svg-icon iconClass="delete" class="icon"></svg-icon>
				</span>
			</div>
			<input v-show="item.itemStatus === 'edit'" v-model="item[showField]" class="edit-input" @blur="comfirmEdit(item)"/>
		</div>
		<div v-if="!isDel && isEditGroup" class="item-wrap add">
			<div v-show="!isEdit" class="inner-item" @click="clickAdd">
				<svg-icon icon-class="add" class="add-icon"></svg-icon>
				<span class="text">{{addText}}</span>
			</div>
			<input v-show="isEdit" v-model="addInputText" class="edit-input" @blur="comfirmAdd"/>
		</div>
	</div>
</template>

<script>
export default {
  name: 'ExpandButton',
  props: {
    itemList: Array,
		addText: {
			type: String,
			default: '新增'
		},
		isDel: Boolean,
		isEditGroup: {
			type: Boolean,
			default: true
		},
		showField: {
			type: String,
			default: 'text'
		}
  },
	data() {
		return {
			addInputText: '',
			isEdit: false
		}
	},
	beforeDestroy() {
	
	},
	methods: {
		// 点击新增
		clickAdd(event) {
			this.isEdit = true
			this.$nextTick(() => {
				event.currentTarget.nextElementSibling.focus()
			})
		},
		// 确定新增
		comfirmAdd() {
			this.isEdit = false
			let item = {
				addInputText: this.addInputText
			}
			this.$emit('comfirmAdd', item, false)
			this.addInputText = ''
		},
		// 点击编辑
		cickEdit(event, item, index) {
			this.itemList.splice(index, 1, {...item, itemStatus: 'edit'})
			this.$nextTick(() => {
				event.currentTarget.parentElement.nextElementSibling.focus()
			})
		},
		// 确定修改
		comfirmEdit(item) {
			item.itemStatus = 'normal'
			this.$emit('comfirmAdd', item, true)
		},
		// 点击删除
		cickDelete(item, index) {
			this.$hMsgBox.confirm({
				title: "确定要删除吗？",
				content: "",
				onOk: () => {
					this.$emit('confirmDelete', item, index)
				}
			})
		},
	}
}
</script>

<style scoped lang="scss">
.edit-button-group{
	display: flex;
	flex-wrap: wrap;
	.item-wrap{
		max-width: 50%;
		margin-right: 10px;
		margin-bottom: 8px;
		&.add{
			margin-right: 0px;
			.inner-item{
				padding: 7px 12px;
				color: #4686F2;
				cursor: pointer;
				.add-icon{
					margin-right: 6px;
				}
			}
		}
		.inner-item{
			display: flex;
			align-items: center;
			border: 1px solid #D1D4FF;
			border-radius: 16px;
			padding: 9px 12px;
			line-height: 1;
			flex:1;
			.text{
				display: inline-block;
			}
			.icon{
				width: 12px;
				height: 12px;
				margin-left: 4px;
				flex-shrink: 0;
			}
		}
		.edit-input{
			border: 1px solid rgba(209,212,255,1);
			border-radius: 16px;
			outline: none;
			padding: 0px 12px;
			line-height: 30px;
			width: 98px;
			&:focus{
				border: 1px solid rgba(160,166,249,1);
				box-shadow: 0px 0px 4px 0px rgba(132,167,207,0.47);
			}
		}
	}
}
</style>
